<template>
    <el-popover class="module-h5-rich-text" placement="right" width="700" v-model="visible" trigger="manual" @show="visible = true" @hide="visible = false">
        <div class="setting-container-rich-text">
            <header>
                <div class="sub-item">富文本编辑</div>
                <!--<a href="javascript:;" class="remove-btn" type="text" @click="()=>{ remove(moduleIndex); }">删除模块</a>-->
            </header>
            <section>
              <div class="flex-container anchor-point-container">
                <div class="label">锚点设置：</div>
                <el-checkbox v-model="data.is_anchor_point" @change="(value)=>{data.anchor_point_name = ''; updateAnchorPoint()}">设为锚点</el-checkbox>
                <div>
                  <el-input :disabled="!data.is_anchor_point" v-model="data.anchor_point_name" placeholder="请输入锚点名称" maxLength="10" @change="updateAnchorPoint"></el-input>
                </div>
              </div>
              <tinymce v-if="visible" :height="360" v-model="data.comment"></tinymce>
            </section>
        </div>
        <div slot="reference" class="rich-text-container" :id="`moduleForm${moduleIndex}`" @click="visible = !visible">
            <div v-if="data.comment" v-html="data.comment.replace(/href/g, 'data-href')"></div>
            <template v-else>富文本内容</template>
        </div>
    </el-popover>
</template>
<script>
  import Tinymce from '@/components/Tinymce'
  export default {
    name: 'H5RichText',
    components: {
      Tinymce
    },
    props: {
      moduleIndex: {
        type: Number,
        default: 0
      },
      data: {
        type: Object,
        default(){
          return {
            comment: ''
          }
        }
      },
      updateAnchorPoint: {
        type: Function
      },
      remove: {
        type: Function
      }
    },
    data(){
      return {
        visible: false
      }
    },
    methods: {
      hideModule(){
        this.visible = false
      }
    }
  }
</script>
<style lang="scss">
    @import "../../../../styles/mixin";
    .module-h5-rich-text{

    }
    .setting-container-rich-text{
        header{
            @include flex;
            @include a-center;
            border-bottom: 1px solid #efefef;
            padding-bottom: 6px;

            .sub-item{
                @include sub-item;
                span{
                    color: #999;
                    font-size: 12px;
                }
            }
            .remove-btn{
                color: red;
            }
        }
        .anchor-point-container{
          @include a-center;
          padding: 10px 0;

          .label{
            padding-right: 10px;
          }

          .el-input{
            margin-left: 10px;
          }
        }
        .item-container{
            @include flex;
            @include a-center;
            padding: 18px 6px 6px 6px;
            border: 1px solid #efefef;
            margin-top: 6px;

            .sub-item{
                @include sub-item;
            }
            .tool-item{
                color: red;
                padding: 6px;
                cursor: pointer;
            }
        }
        .el-form{
            @include scrollbar;
            max-height: 600px;
            .el-input,
            .el-textarea,
            .el-select,
            .el-date-editor{
                width: 100%;
            }
        }
        .add-container{
            text-align: center;
            padding-top: 12px;
        }
    }
    .rich-text-container{
        min-height: 64px;
        background: #fff;
        img{
            max-width: 100%;
        }
    }
</style>
